<template>
<!-- 复用组件 -->
<div class='demo'>
      <van-nav-bar :title="propsTitle"  left-arrow @click-left="onClickLeft">
  <van-icon name="search" slot="right" size="20px" />
</van-nav-bar>
<div class="management" >
管理
</div>
     <div class="demo2">
            
        <div class="productList">
             <transition-group name="hello" appear class="productList">
            <div class="productItem" v-for="item in propList" :key="item.goodsId" >
              
                <img :src="`http://42.194.208.192:3001${item.goodsImg}`" alt="">
                <div class="text">
                    <span class="violet">{{item.goodsName}}</span>
                <span class="orange">{{item.goodsPrice}}</span>
                </div>
              
            </div>
         </transition-group>
        </div>
    </div>



</div>
</template>
<script>

export default {
name:'mySeries',
components:{
},
data(){
return{
 
     
}
},
mounted(){
    // 获取足迹
    this.propGetList()
},
props:{

    // 导航标题
    propsTitle:{
        type: String,
        default: '我的标题',
        required:true
    },
    // 收藏的数组 、、 足迹的数组
      propList: {
      type: Array,
      default: [],
      required:true
    },
    // 获取操作数组方法
    propGetList:{
        type: Function,
        default: ()=>{console.log('获取数组');},
        required:true
    },

},

methods:{

   
  
  
    toCommodity(){
        this.$router.push({
            name:'Commodity'
        })
    },
    onClickLeft(){
        this.$router.go(-1)
    }
},
computed:{
   
}
}
</script>
<style lang='less' scoped>
.demo{
    .management{
        width: 97%;
        box-sizing: border-box;
        text-align: right;
        line-height: 50px;
        padding-right: 20px;
        height: 50px;
        background: white;
        margin: auto;
        border-radius: 4px;
        margin-top: 10px;
        margin-bottom: 3px;
    }
     .demo2{
        width: 100%;
        height: calc(100vh - 109.85px);
        overflow-y: auto;
        box-sizing: border-box;
        .productList{
            margin:auto;
             width: 97%;
            // height: 100%;
            display: flex;
            // flex-direction: column;
            justify-content: space-between;
            flex-wrap: wrap;
            box-sizing: border-box;

            .productItem{
            // border: 1px solid red;

                margin-bottom: 4px;
                background-color: white;
                width: 49.5%;
                height: 200px;
                overflow: hidden;
                box-sizing: border-box;
                position: relative;
              
                img{
                    width: 100%;
                    height: 80%;
                    object-fit: cover;
                    vertical-align: text-bottom;
                }
                .text{
            

                    // text-align: center;
                    padding-left: 20px;
                    .violet{
                    color: rgb(150, 9, 155);
                    
                    }
                    .orange{
                    display: block;
                    color: orange;
                    font-size: 14px;
                    margin-top:3px;
                    }
                }
            }


            
        }
    }
    .leftContent{
        flex-grow: 1;
    }
       .hello-enter-active{
         animation: guigu .5s linear
     }
     .hello-leave-active{
        animation: guigu .5s linear reverse;
    }
   
    @keyframes guigu{
        from{
        opacity: 0;
        transform: translateY(100%);
        z-index: -2;
        }
        to{
        opacity: 1;
        transform: translateY(0px);
        z-index: -2;
        }
    }
   
}
</style>